<!DOCTYPE html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
    <head th:fragment="dom-head(title)">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
        <!-- 自定义 CSS -->
        <link rel="stylesheet" th:href="@{/static/css/common.css}" href="../../../static/css/common.css">
        <title th:text="${title}">Common</title>
    </head>
    <body>
        <div class="header bg-light mb-3 shadow-sm" th:fragment="navbar(active)">
            <nav class="navbar navbar-expand-lg navbar-light bg-light container">
                <a th:href="@{/}" class="navbar-brand text-warning mr-2" href="#">
                    <i class="fas fa-blog"></i>
                    我的论坛
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item mx-2" th:classappend="${active} == 1 ? 'active' : ''">
                            <a th:href="@{/}" class="nav-link" href="#"><i class="fas fa-home"></i> 首页</a>
                        </li>
                        <li class="nav-item mx-2" th:if="${session.USER != null}"
                            th:classappend="${active} == 2 ? 'active' : ''">
                            <a class="nav-link" href="#" th:href="@{/u/message/add}">
                                <i class="fas fa-plus-circle"></i>
                                新增
                            </a>
                        </li>
                        <li class="nav-item mx-2">
                            <a class="nav-link" href="http://ajunnihao.top" target="_blank">
                                <i class="fab fa-blogger"></i> 博客
                            </a>
                        </li>
                    </ul>
                    <a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1"
                       class="text-decoration-none text-danger small mx-5" target="_blank">抗击肺炎</a>
                    <a th:if="${session.USER == null}" th:href="@{/login}"
                       class="text-decoration-none text-light btn btn-sm btn-primary">请登录</a>
                    <div class="nav-item dropdown" th:if="${session.USER != null}">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img th:if="${session.USER.thumb == null || session.USER.thumb == ''}"
                                 th:src="@{/static/img/user.jpg}"
                                 src="../../../static/img/user.jpg" class="rounded-circle mr-0" width="30px">
                            <img th:if="${session.USER.thumb != null && session.USER.thumb != ''}"
                                 th:src="${session.USER.thumb}"
                                 src="../../../static/img/user.jpg" class="rounded-circle mr-0" width="30px">
                            <span class="text-primary" th:text="${session.USER.name}">用户名</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a th:href="@{/u/user/info}" class="dropdown-item" href="#">
                                <i class="far fa-address-card text-muted"></i> 个人中心
                            </a>
                            <button id="logoutBtn" class="dropdown-item">
                                <i class="fas fa-power-off text-muted"></i>
                                退出登录
                            </button>
                        </div>
                    </div>
                    <div th:if="${session.USER != null}">
                        <span th:if="${session.USER.isAdmin != null && session.USER.isAdmin}" class="badge btn-primary">管理员</span>
                    </div>
                </div>
            </nav>
        </div>

        <!-- footer -->
        <div th:fragment="footer" class="mt-5">
            <hr>
            <div class="text-center">
                <p class="small m-0" style="color: #BBBBBB">
                    <span id="span"></span> | All Right Reserved © 2020 Designed by AJun
                </p>
                <a class="text-decoration-none small m-0" target="_blank" style="color: #BBBBBB"
                   href="http://www.beian.miit.gov.cn/">
                    备案号: 陕ICP备19017955号
                </a>
            </div>
            <script type="text/javascript">
                function runtime() {
                    // 初始时间，日/月/年 时:分:秒
                    X = new Date("5/30/2020 12:28:00");
                    Y = new Date();
                    T = (Y.getTime() - X.getTime());
                    M = 24 * 60 * 60 * 1000;
                    a = T / M;
                    A = Math.floor(a);
                    b = (a - A) * 24;
                    B = Math.floor(b);
                    c = (b - B) * 60;
                    C = Math.floor((b - B) * 60);
                    D = Math.floor((c - C) * 60);
                    //信息写入到DIV中
                    span.innerHTML = "小站已勉强运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
                }

                setInterval(runtime, 1000);
            </script>
        </div>
    </body>
</html>